<template>
  <el-tiptap
    :content="value"
    :extensions="extensions"
    style="width: 100%; height: 100%"
    lang="zh"
    v-bind="{ ...$attrs }"
    @onUpdate="onUpdate"
  >
  </el-tiptap>
</template>
<script>
import "element-tiptap/lib/index.css";
import Vue from "vue";
import { ElementTiptap, ElementTiptapPlugin } from "element-tiptap";
Vue.use(ElementTiptapPlugin);
import Heading from "./custom_extensions/Heading/index.js";
import LineHeight from "./custom_extensions/LineHeight/index.js";
import Image from "./custom_extensions/Image/index.js";
import FontSize from "./custom_extensions/FontSize/index.js";
import FontType from "./custom_extensions/FontType/index.js";
import TextColor from "./custom_extensions/TextColor/index.js";
import TextHighlight from "./custom_extensions/TextHighlight/index.js";

import {
  Doc,
  Text,
  Paragraph,
  Bold,
  Underline,
  Italic,
  Strike,
  ListItem,
  BulletList,
  OrderedList,
  Iframe,
  CodeBlock,
  Blockquote,
  HorizontalRule,
  TodoItem,
  TodoList,
  Indent,
  TextAlign,
  HardBreak,
  TrailingNode,
  History,
  Table,
  TableHeader,
  TableCell,
  TableRow,
  FormatClear,
  Preview,
  Print,
  SelectAll,
  Fullscreen,
  CodeView,
} from "element-tiptap";
export default {
  name: "ElTipTapRichText",
  components: {
    "el-tiptap": ElementTiptap,
  },
  props: {
    value: {
      required: true,
      type: String | undefined,
    },
  },
  model: {
    prop: "value",
    event: "update:value",
  },
  data() {
    return {
      extensions: [
        new Doc(),
        new Text(),
        new Paragraph(),
        new Heading(),
        new Bold({ bubble: false }),
        new Underline({ bubble: false }),
        new Italic(),
        new Strike(),
        new TextColor(),
        new TextHighlight(),
        new FontSize(),
        new FontType(),
        new Indent(),
        // new LineHeight(),
        new FormatClear(),
        new ListItem(),
        new BulletList(),
        new OrderedList(),
        new Image(),
        // new Iframe(),
        new CodeBlock(),
        new Blockquote(),
        new TodoItem(),
        new TodoList(),
        new TextAlign(),
        new HorizontalRule(),
        // new HardBreak(),
        // new TrailingNode(),
        new History(),
        // new Table(),
        // new TableHeader(),
        // new TableCell(),
        // new TableRow(),
        new Preview(),
        new Print(),
        new SelectAll(),
        new Fullscreen(),
        // new CodeView(),
      ],
    };
  },
  methods: {
    onUpdate(n) {
      this.$emit("update:value", n);
    },
  },
};
</script>
<style lang="scss" scoped>
.el-tiptap-editor::v-deep {
  & > div {
    background-color: #bed8db;
    border-radius: 0;
  }
}
</style>